<template lang="pug">
  .goods-dialog(v-if="showModal && getGoods")
    el-dialog(
      :title="getGoods.name",
      :visible.sync="showModal",
      top="10vh",
      width="640px",
      :before-close="beforeCloseHandler")
      .slide-list
        el-carousel(v-if="getGoods.type == 0", indicator-position="outside", height="400px")
          el-carousel-item(v-for="item in getGoodsImgs", :key="item.imgurl")
            img(:src="item.imgurl")
        iframe(style="height:300px", v-else, width="100%", height="100%", frameBorder="0",scrolling="no", :src="getGoods.linkurl")
      .bottom.clearfix
        el-tabs(v-model="activeName", @tab-click="handleTabSwitch")
          el-tab-pane(label="商品详情", name="detail")
            span.item 库存：
              span.red {{getGoods.stock}}
              | 件
            span.item 原价：
              span.red {{getGoods.price}}
              | 元
            el-button.button(type="primary", size="small", @click="addToCart") 加入购物车
            //- .bottom.clearfix
              //- span {{getGoods.addtime}}
            .description
              h3 商品详情：
              span(v-html="getGoods.description")
          el-tab-pane(label="商品评论", name="rating")
            RatingList(v-if="getGoods")
</template>

<script>
import RatingList from '@/components/Rating/ratingList'
import { mapGetters } from 'vuex'

import modalMixin from '@/mixins/modal'
export default {
  name: 'goodsModal',
  mixins: [modalMixin],
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      logined: false,
      goodsCount: 0,
      activeName: 'detail'
    }
  },
  mounted() {
    this.$vgo.on('modal:goods', () => {
      this.$bar.finish()
      this.openModal()
    })
  },
  computed: {
    ...mapGetters([
      'goodsItem',
      'goodsScore'
    ]),
    getGoods() {
      if(this.goodsItem) {
        return this.goodsItem
      }
    },
    getGoodsImgs() {
      if(this.getGoods) {
        return this.getGoods.productimgs
      }
    }
  },
  methods: {
    handleTabSwitch(tab, event) {

    },
    addToCart() {
      // 如果已经登录了，就不去检查是否已经登录
      if(this.logined) {
        this.goodsCount++
        this.$store.dispatch('addToCart', {productid: this.getGoods.productid, num: 1})
        return
      }
      // 如果是第一次，则判断是否已经登录
      if(this.$AUTH.checkLogin()) {
        // 记录用户登录状态
        this.logined = true
        this.goodsCount++
        this.$store.dispatch('addToCart', {productid: this.getGoods.productid, num: 1})
      } else {
        this.closeModal()
      }
    }
  },
  components: {
    RatingList
  }
}
</script>

<style lang="stylus">
.goods-dialog
  // background: $gray-dark
  .el-dialog__body
    max-height: 500px
    overflow-y: auto
  .slide-list
    .el-carousel
      .el-carousel__container
        height: 200px
        .el-carousel__item img
          text-align: center
          max-width: 100%
          height: 100%
  .description
    margin-top: 10px
    h3
      font-size: 16px
      color: $danger
    img
      max-width: 100%
      text-align: center

  .bottom
    line-height: 32px
    .item
      margin-right: 10px
      font-size: 14px
      .red
        font-weight: 700
        font-size: 18px
        color: $danger
  .button
    float: right
  .image
    width: 100%
    display: block

</style>
